import {Button, Modal, Tag} from "antd";
import {useEffect, useState} from "react";
import PermissionSelect from "./permissionSelect";
import RequestUtils from "../../../utils/requestUtils";
import RequestApis from "../../../apis/requestApis";
import {CloseOutlined} from "@ant-design/icons";

/**
 * 为角色分配权限模态框组件
 * @constructor
 */
const RolePermissionAllocate = (props) => {

    const {
        messageApi,
        editModalVisible,
        setEditModalVisible,
        roleId,
        existPermissions,
        searchRoleById
    } = props;

    const [permissions, setPermissions] = useState(existPermissions);

    // 权限选择控件开关
    const [permissionSelectVisible, setPermissionSelectVisible] = useState(false);

    /**
     * 为角色分配权限
     */
    const allocateRolePermission = () => {
        RequestUtils.post(RequestApis.permissionManage.allocateRolePermission, {
            roleId: roleId,
            permissionCodes: permissions ? permissions.map(v => v.permissionCode) : []
        }).then(res => {
            searchRoleById();
            messageApi.success("权限分配成功")
            setEditModalVisible({
                ...editModalVisible,
                editPermission: false
            });
        }).catch(err => messageApi.error(err.message))
    }

    useEffect(() => {
        if (editModalVisible.editPermission) {
            setPermissions(existPermissions);
        }
        // eslint-disable-next-line
    }, [editModalVisible.editPermission]);

    return (
        <Modal
            open={editModalVisible.editPermission}
            title="为角色分配权限"
            width={600}
            onCancel={() => setEditModalVisible({
                ...editModalVisible,
                editPermission: false
            })}
            footer={<div>
                <Button
                    type={"primary"}
                    onClick={allocateRolePermission}
                >
                    确认
                </Button>
                <Button
                    danger={true}
                    style={{marginLeft: "12px"}}
                    onClick={() => {
                        setEditModalVisible({
                            ...editModalVisible,
                            editPermission: false
                        });
                    }}
                >
                    取消
                </Button>
            </div>}
        >
            <div style={{
                padding: '20px 16px',  // 增加内边距，让内容更舒展
                fontSize: '14px'
            }}>

                <div style={{marginBottom: '20px'}}>
                    <Button
                        color={'purple'}
                        variant={'outlined'}
                        style={{height: '30px', width: '200px'}}
                        onClick={() => {
                            setPermissionSelectVisible(true);
                        }}
                    >
                        选择权限
                    </Button>
                </div>


                <div style={{
                    marginBottom: '20px',  // 增加项之间的间距
                    display: 'flex',
                    flexDirection: 'column',
                    gap: '8px'  // 标签与输入框的垂直间距
                }}>
                    <span style={{
                        color: '#4E5969',  // 标签文字颜色
                        fontWeight: 500,
                        lineHeight: '1.5'
                    }}>已选中的权限</span>

                    <div style={{
                        background: '#F5F7FA',
                        paddingLeft: '8px',
                        paddingRight: '8px',
                        paddingBottom: '6px',
                        fontSize: '14px',
                        display: 'flex'
                    }}>
                        <div>
                            {permissions && permissions.length > 0 ? permissions.map((v) => (
                                    <Tag
                                        color='geekblue'
                                        style={{marginTop: '8px'}}
                                    >
                                        <span style={{fontSize: '13px'}}>{v.permissionName}</span>
                                        <span style={{
                                            fontSize: '14px',
                                            marginLeft: '8px',
                                            cursor: 'pointer'
                                        }}
                                              onClick={() => {
                                                  setPermissions(permissions.filter(item => item.permissionCode !== v.permissionCode));
                                              }}
                                        >
                                    <CloseOutlined/>
                                </span>
                                    </Tag>
                                )) :
                                <div style={{paddingTop: '8px', paddingLeft: '8px', paddingRight: '8px'}}>
                                    <span style={{fontSize: '14px'}}>暂未选择任何角色</span>
                                </div>}
                        </div>
                    </div>

                </div>

                <PermissionSelect
                    visible={permissionSelectVisible}
                    setVisible={setPermissionSelectVisible}
                    permissions={permissions}
                    setPermissions={setPermissions}
                />

            </div>
        </Modal>
    )
}
export default RolePermissionAllocate;